<template>
    <div class="home">
        <div class="img_bg">
            <LazyImg ref='load' :src="bgImg"></LazyImg>
        </div>
        <div class="index_box_top"></div>
        <div class="index_box_bottom">
            <router-link :to="{ name: 'registerOne' }">
                <button type="button" class="btn btn-blue joinus"> Register Now </button>
            </router-link>
            <router-link :to="{ name: 'login' }">
                <button type="button" class="btn btn-nocolor signin main_color"> Log in </button>
            </router-link>
            <div class="index_full" @click="gotoFullSite()"> VIEW FULL WEBSITE </div>
            <div class="siteinfo"> {{language.about_copyrightYear}} {{language.unify_versionName}}</div>
        </div>
        <div class="pageBlock" v-if="!isMobile">
            <p>You can utilize this site more efficiently on your mobile devices!</p>
        </div>
    </div>
</template>
<script>
import LazyImg from './LazyImg'
import permissionPartMixin from '../common/permissionPartMixin'

export default {

    name: 'home',

    mixins: [permissionPartMixin],

    components: {
        LazyImg,
    },

    data: function() {
        return {
            isMobile: true,
            bgImg:require('../assets/loading_hd.jpg'),
        }
    },

    activated() {
        this.syncLogin();
    },

    deactivated() {},

    created() {
        if (!Unit.isMobile()) {
            this.isMobile = false;
        }
    },

    methods: {
        gotoFullSite() {
            window.open(mainSite + '?main=1');
        }
    }
}

</script>

<style>
.home .img_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url(./../assets/loading.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #282629;
}

.home .pageBlock {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    display: table;
}

.home .pageBlock p {
    display: table-cell;
    vertical-align: middle;
}

.home .index_box_top {
    position: relative;
    width: 100%;
    background: url(./../assets/logo.png) center no-repeat;
    background-size: 270px auto;
    height: 44px;
    margin-top: 50px;
    z-index: 2;
}

.home .index_desc {
    position: relative;
    z-index: 3;
    margin: 20px auto auto auto;
    color: #fff;
    width: 100%;
    font-size: 15px;
    margin-top: 10px;
    font-weight: 100;
    text-align: center;
}

.home .index_box_bottom {
    width: 100%;
    text-align: center;
    position: absolute;
    min-height: 200px;
    bottom: 0;
    z-index: 3;
}

.home .signin,
.home .joinus {
    color: #fff;
    width: 200px;
    margin: 10px;
    font-size: 13px;
    display: inline-block;
    padding: 0 12px;
    font-weight: 400;
    height: 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.home .signin {
    background: #fff;
}

.home .index_full {
    width: 200px;
    margin: auto;
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    font-size: 9px;
    color: #fff;
}

.home .siteinfo {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    transform: scale(0.8);
}

@media screen and (orientation:landscape) {
    .home .img_bg {
        background-image: url(../assets/ipad_loading.jpg);
    }
    .home .img_bg .lazyImg {
        display: none;
    }
    .home .index_box_bottom {
        height: auto;
    }
}

</style>
